<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
    v-model="val"
    filterable
    clearable
    placeholder="请选择运营商"
    :loading="loading"
    @focus="getMerchantList"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
import { getMerchants } from '@/api/user'
export default {
  name: 'SearchMerchants',
  data() {
    return {
      val: '',
      options: [{ label: '全部', value: '' }],
      loading: false,
    }
  },
  props: {
    value: {
      required: true,
    },
    defaultOptions: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value(val) {
      this.val = val
    },
  },
  methods: {
    getMerchantList() {
      this.loading = true
      getMerchants().then((data) => {
        this.options = data.map((item) => {
          return {
            label: item.userName,
            value: item.id,
          }
        })
        this.loading = false
      })
    },
  },
  created() {
    if (!this.defaultOptions) this.options = []
    // this.getMerchantList()
  },
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>
